<?xml version="1.0" encoding="UTF-8"?>
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.prime.com.tr/ui"
	template="/layout/layout.xhtml" contentType="text/html">

	<ui:define name="body">
		<h:form id="form">

			<p:growl id="msgs" />

			<p:panel header="Create a new equipo">
				<h:panelGrid columns="2" id="grid">
					<p:commandLink update="equipoDetail" value="Detalle"
						oncomplete="equipoDialog.show()" title="View Detail">
						<p:graphicImage value="/images/search.png" />
					</p:commandLink>
				</h:panelGrid>
			</p:panel>

			<p:ajaxStatus style="width:16px;height:16px;">
				<f:facet name="start">
					<h:graphicImage value="../design/ajaxloading.gif" />
				</f:facet>

				<f:facet name="complete">
					<h:outputText value="" />
				</f:facet>
			</p:ajaxStatus>

			<p:outputPanel id="equipos">

				<p:dataGrid var="equipo" value="#{managedBeanEquipos.equipos}"
					columns="3" rows="12" paginator="true" effect="true"
					paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
					rowsPerPageTemplate="9,12,15">

					<p:column>
						<p:panel header="#{equipo.nombre}" style="text-align:center">
							<div align="center">
								<h:panelGrid columns="1" style="width:33%">
									<h:outputText value="#{equipo.nombre}" />

									<p:commandLink update="equipoDetail" value="Detalle"
										oncomplete="equipoDialog.show()" title="View Detail">
										<p:graphicImage value="/images/search.png" />
										<f:setPropertyActionListener value="#{equipo}"
											target="#{managedBeanEquipos.equipo}" />
									</p:commandLink>
								</h:panelGrid>
							</div>
						</p:panel>
					</p:column>
				</p:dataGrid>

			</p:outputPanel>
			<p:dialog header="equipo Detail" widgetVar="equipoDialog" width="400"
				height="275">
				<p:outputPanel id="equipoDetail" style="text-align:center;"
					layout="block">
					<h:panelGrid columns="2" cellpadding="5">

						<h:outputLabel value="Nombre*: " />
						<p:inputText id="txt_nombre"
							value="#{managedBeanEquipos.equipo.nombre}" required="true" />

						<h:outputLabel value="Color: " />
						<p:colorPicker value="#{managedBeanEquipos.equipo.color}">
							<f:converter converterId="colorPickerConverter" />
						</p:colorPicker>

						<p:commandButton
							value="#{empty managedBeanEquipos.equipo.id ? 'Anadir' : 'Modificar'}"
							update="equipos msgs @parent"
							action="#{managedBeanEquipos.reinit}">
							<p:collector value="#{managedBeanEquipos.equipo}"
								addTo="#{managedBeanEquipos.equipos}" />
						</p:commandButton>
						<p:commandButton value="Reset" type="reset" />
					</h:panelGrid>
				</p:outputPanel>
			</p:dialog>

			<p:commandLink value="Guardar" title="Guardar" actionListener="#{managedBeanEquipos.anadirEquipo}" />
		</h:form>
	</ui:define>
</ui:composition>